```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设计模式分类与解析</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .title {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
        .pattern-card {
            transition: all 0.3s ease;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .pattern-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .pattern-icon {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            color: #667eea;
        }
        .mermaid {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .footer-link {
            transition: color 0.2s ease;
        }
        .footer-link:hover {
            color: #a5b4fc;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <h1 class="title text-4xl md:text-5xl mb-6">设计模式的艺术</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto opacity-90">构建灵活、可维护和可扩展系统的23种经典解决方案</p>
            <div class="flex justify-center space-x-4">
                <a href="#creational" class="px-6 py-3 bg-white text-indigo-600 rounded-full font-medium hover:bg-gray-100 transition">创建型模式</a>
                <a href="#structural" class="px-6 py-3 bg-indigo-700 text-white rounded-full font-medium hover:bg-indigo-600 transition">结构型模式</a>
                <a href="#behavioral" class="px-6 py-3 bg-indigo-700 text-white rounded-full font-medium hover:bg-indigo-600 transition">行为型模式</a>
            </div>
        </div>
    </section>

    <!-- Intro Section -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="text-center mb-16">
                <div class="inline-block px-4 py-1 bg-indigo-100 text-indigo-600 rounded-full text-sm font-medium mb-4">设计模式分类</div>
                <h2 class="title text-3xl md:text-4xl mb-6">设计模式的三大分类</h2>
                <p class="text-gray-600 max-w-3xl mx-auto">设计模式通常分为以下三大类，每一类有其独特的用途和特点，每一类设计模式通过解决不同的设计问题，帮助开发者构建灵活、可维护和可扩展的系统。</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 mb-16">
                <div class="bg-white p-6 rounded-xl text-center shadow-sm hover:shadow-md transition">
                    <div class="pattern-icon">
                        <i class="fas fa-cubes"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">创建型模式</h3>
                    <p class="text-gray-600">关注对象创建机制，以适合给定情况的方式创建对象</p>
                </div>
                <div class="bg-white p-6 rounded-xl text-center shadow-sm hover:shadow-md transition">
                    <div class="pattern-icon">
                        <i class="fas fa-sitemap"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">结构型模式</h3>
                    <p class="text-gray-600">关注类和对象组合，形成更大的结构</p>
                </div>
                <div class="bg-white p-6 rounded-xl text-center shadow-sm hover:shadow-md transition">
                    <div class="pattern-icon">
                        <i class="fas fa-exchange-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">行为型模式</h3>
                    <p class="text-gray-600">关注对象间的高效通信与职责分配</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization -->
    <section class="py-16 px-4 md:px-0 bg-gray-100">
        <div class="container mx-auto max-w-5xl">
            <h2 class="title text-3xl md:text-4xl mb-12 text-center">设计模式关系图谱</h2>
            <div class="mermaid">
                graph TD
                    A[设计模式] --> B[创建型模式]
                    A --> C[结构型模式]
                    A --> D[行为型模式]
                    
                    B --> B1[单例模式]
                    B --> B2[工厂方法]
                    B --> B3[抽象工厂]
                    B --> B4[建造者模式]
                    B --> B5[原型模式]
                    
                    C --> C1[适配器模式]
                    C --> C2[桥接模式]
                    C --> C3[装饰器模式]
                    C --> C4[外观模式]
                    C --> C5[组合模式]
                    C --> C6[享元模式]
                    C --> C7[代理模式]
                    
                    D --> D1[责任链模式]
                    D --> D2[观察者模式]
                    D --> D3[策略模式]
                    D --> D4[状态模式]
                    D --> D5[模板方法]
                    D --> D6[命令模式]
                    D --> D7[迭代器模式]
                    D --> D8[中介者模式]
                    D --> D9[备忘录模式]
                    D --> D10[解释器模式]
                    D --> D11[访问者模式]
            </div>
        </div>
    </section>

    <!-- Creational Patterns -->
    <section id="creational" class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex items-center mb-12">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                    <i class="fas fa-cubes text-xl"></i>
                </div>
                <h2 class="title text-3xl md:text-4xl">创建型模式</h2>
            </div>
            <p class="text-gray-600 mb-10 max-w-3xl">创建型模式主要关注如何实例化对象或创建对象的过程。这些模式通过定义对象创建的方式，来提高系统的灵活性和复用性，避免直接使用构造函数来创建对象。</p>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">单例模式</h3>
                    <p class="text-gray-600 mb-4">确保一个类只有一个实例，并提供一个全局访问点。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：日志记录器、配置管理、数据库连接
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">工厂方法模式</h3>
                    <p class="text-gray-600 mb-4">定义一个创建对象的接口，但让子类决定实例化哪个类。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：框架设计、插件系统
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">抽象工厂模式</h3>
                    <p class="text-gray-600 mb-4">提供一个创建相关或依赖对象的接口，而无需指定具体类。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：UI工具包、跨平台应用
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">建造者模式</h3>
                    <p class="text-gray-600 mb-4">分步骤创建复杂对象，将对象的构建与其表示分离。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：复杂对象创建、可选参数多
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">原型模式</h3>
                    <p class="text-gray-600 mb-4">通过复制现有对象来创建新对象，而不是通过构造函数。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：对象创建成本高、相似对象
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Structural Patterns -->
    <section id="structural" class="py-16 px-4 md:px-0 bg-gray-100">
        <div class="container mx-auto max-w-5xl">
            <div class="flex items-center mb-12">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                    <i class="fas fa-sitemap text-xl"></i>
                </div>
                <h2 class="title text-3xl md:text-4xl">结构型模式</h2>
            </div>
            <p class="text-gray-600 mb-10 max-w-3xl">结构型模式主要关注如何将类或对象组合在一起，形成更大的结构。它们通过简化对象之间的关系和组织结构来提高代码的灵活性和复用性。</p>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">适配器模式</h3>
                    <p class="text-gray-600 mb-4">将一个类的接口转换成客户端所期待的另一种接口，使得原本接口不兼容的类能够一起工作。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：集成旧系统、第三方库适配
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">桥接模式</h3>
                    <p class="text-gray-600 mb-4">将抽象部分与实现部分分离，使得它们可以独立变化。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：多维度扩展、跨平台实现
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">装饰器模式</h3>
                    <p class="text-gray-600 mb-4">动态地给一个对象添加额外的职责，而不影响其他对象。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：动态添加功能、扩展对象行为
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">外观模式</h3>
                    <p class="text-gray-600 mb-4">提供一个统一的接口，用来访问子系统中的一群接口，简化子系统的使用。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：简化复杂系统、封装遗留代码
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">组合模式</h3>
                    <p class="text-gray-600 mb-4">将对象组合成树形结构以表示"部分-整体"的层次结构，使得客户端对单个对象和对象组合的使用具有一致性。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：UI组件、文件系统
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">享元模式</h3>
                    <p class="text-gray-600 mb-4">通过共享大量细粒度的对象来减少内存占用，特别适合用于大量相似对象的场景。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：文字处理器、游戏开发
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">代理模式</h3>
                    <p class="text-gray-600 mb-4">提供一个代理对象来控制对另一个对象的访问，以增加功能或控制访问。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：远程代理、虚拟代理、保护代理
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Behavioral Patterns -->
    <section id="behavioral" class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <div class="flex items-center mb-12">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4">
                    <i class="fas fa-exchange-alt text-xl"></i>
                </div>
                <h2 class="title text-3xl md:text-4xl">行为型模式</h2>
            </div>
            <p class="text-gray-600 mb-10 max-w-3xl">行为型模式主要关注对象之间的交互和责任分配。它们通过定义对象之间的职责分配、通信方式和合作方式来优化系统的灵活性和可扩展性。</p>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">责任链模式</h3>
                    <p class="text-gray-600 mb-4">将请求沿着处理链传递，直到有对象处理它为止。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：多级审批、事件处理
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">观察者模式</h3>
                    <p class="text-gray-600 mb-4">定义一种一对多的依赖关系，当一个对象改变状态时，所有依赖于它的对象都会收到通知并自动更新。</p>
                    <div class="text-sm text-gray-500 flex items-center">
                        <i class="fas fa-check-circle mr-2 text-green-500"></i> 适用场景：事件驱动系统、数据绑定
                    </div>
                </div>
                <div class="pattern-card bg-white p-6">
                    <h3 class="font-bold text-xl mb-3 text-indigo-600">策略模式</h3>
                    <p class="text-gray-6